/**
 * 基于@fortawesome封装的，要安装这三个包
 * "@fortawesome/fontawesome-svg-core"
 * "@fortawesome/free-solid-svg-icons"
 * "@fortawesome/react-fontawesome":
 */
import React from "react";
import classNames from 'classnames'
import {FontAwesomeIcon, FontAwesomeIconProps} from '@fortawesome/react-fontawesome'

export type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark'


export interface IconProps extends FontAwesomeIconProps {
  theme?: ThemeProps
}

/**
 * fontawesome教程：https://fontawesome.com/how-to-use/on-the-web/using-with/react
 *
 * 图标地址：https://fontawesome.com/icons?d=gallery&p=2&s=brands&m=free
 *
 * icon组件自带了Free图标，@fortawesome/free-solid-svg-icons
 *
 * ```js
 *    引入其他图标Brands图标：
 *    yarn add @fortawesome/free-brands-svg-icons
 *    import { library } from '@fortawesome/fontawesome-svg-core'
 *    import { fab } from '@fortawesome/free-brands-svg-icons'
 *    library.add(fab)
 * ```
 *
 *
 */
export const Icon: React.FC<IconProps> = (props) => {
  const {className, theme, ...restProps} = props

  const classes = classNames('viking-icon', className, {
    [`icon-${theme}`]: theme  // 主题色
  })
  return (
    <FontAwesomeIcon className={classes} {...restProps} />
  )
}

export default Icon
